<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Whack A Mole!</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1>Whack-a-mole!
    <span class="score">0</span>
  </h1>
  <button onClick="startGame()">Start!</button>

  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>

  <script>
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    let isOver = false
    let lastHole
    let score = 0

    function show(time, hole) {
      hole.classList.add('up')
      setTimeout(() => {
        hole.classList.remove('up')
        if (!isOver) {
          peer()
        }
      }, time)
    }

    function peer() {
      
      let max = 1000
      let min = 200
      let showTime = Math.floor(Math.random() * (max - min) + min)
      const idx = Math.floor(Math.random() * (holes.length - 1))
      let hole = holes[idx]
      if(lastHole == hole) {
        return peer()
      }
      lastHole = hole

      show(showTime, hole)
    }

    function startGame(params) {
      let gameTime = 10
      isOver = false
      score = 0
      scoreBoard.textContent = score
      
      peer()
      setTimeout(() => {
        isOver = true
      }, gameTime * 1000)
    }

    function handleClick() {
      this.classList.remove('up')
      score++
      scoreBoard.textContent = score
    }

    moles.forEach(hole => hole.addEventListener('click', handleClick))
  </script>
</body>

</html>